<template>
  <div STYLE="background-color: #B0B0B4">
    <div id="myChart" style="width: 800px;height:700px; background-color: #f9fafc; margin:0 auto">
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import * as echarts from 'echarts';
  import HeNanJson from '@/assets/HN.json'
  export default {
    data() {
      return {
        tableData:[{
          name:"",value:""
        }]
      }
    },
    mounted() {
      this.getDataList();
      // this.drawLine();
    },
    methods: {
      getDataList () {
        axios.get('/api/shiShangEntity/shidata')
          .then(({data}) => {
            if(data.code===111){
              this.tableData = data.data
              // var value = this.tableData.value
              console.log(this.tableData)
              this.drawLine();
            }

          })
          .catch((e) =>{
            console.log(e)
          })
      },
      drawLine() {
        let myChart = echarts.init(document.getElementById('myChart'))
        // 基于准备好的dom，初始化echarts实例
        myChart.hideLoading();
        echarts.registerMap('HK', HeNanJson);
        // 绘制图表
        const options = {
          title: {
            text: '河南省各市县土壤墒情情况展示',
            subtext: '数据来自Wikipedia'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (土壤墒情)'
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: {readOnly: false},
              restore: {},
              saveAsImage: {}
            }
          },
          visualMap: {
            min: 0,
            max: 100,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['orangered', 'yellow', 'lightskyblue']
            }
          },
          series: [
            {
              name: '河南墒情',
              type: 'map',
              mapType: 'HK', // 自定义扩展图表类型
              data:'tableData',
              label: {
                show: true
              },
              data: this.tableData,
              // 自定义名称映射
              nameMap: {
                '郑州市':'郑州市',
                '开封市':'开封市',
                '洛阳市':'洛阳市',
                '平顶山市':'平顶山市',
                '安阳市':'安阳市',
                '鹤壁市':'鹤壁市',
                '新乡市':'新乡市',
                '焦作市':'焦作市',
                '濮阳市':'濮阳市',
                '许昌市':'许昌市',
                '漯河市':'漯河市',
                '三门峡市':'三门峡市',
                '南阳市':'南阳市',
                '商丘市':'商丘市',
                '信阳市':'信阳市',
                '周口市':'周口市',
                '驻马店市':'驻马店市',
                '济源市':'济源市',
              }
            }
          ]
        }
        myChart.setOption(options)
        console.log(myChart)
      }
    },
    created() {
      // this.getDataList()
    },

  }
</script>

<style>
</style>
